import React from 'react';
import { Tabs, Card, List, Typography } from 'antd';
import {
  FormOutlined,
  TableOutlined,
  BarChartOutlined,
  AppstoreOutlined,
  BankOutlined,
} from '@ant-design/icons';

const { Title } = Typography;

interface ComponentItem {
  id: string;
  name: string;
  icon: React.ReactNode;
}

/**
 * 组件面板，显示可用于拖拽的组件
 * @returns 组件面板组件
 */
const ComponentPanel: React.FC = () => {
  // 基础组件列表
  const basicComponents: ComponentItem[] = [
    { id: 'input', name: '输入框', icon: <FormOutlined /> },
    { id: 'select', name: '下拉选择', icon: <FormOutlined /> },
    { id: 'button', name: '按钮', icon: <FormOutlined /> },
    { id: 'table', name: '表格', icon: <TableOutlined /> },
    { id: 'chart', name: '图表', icon: <BarChartOutlined /> },
  ];

  // 容器组件列表
  const containerComponents: ComponentItem[] = [
    { id: 'grid', name: '栅格布局', icon: <AppstoreOutlined /> },
    { id: 'card', name: '卡片', icon: <AppstoreOutlined /> },
    { id: 'tabs', name: '标签页', icon: <AppstoreOutlined /> },
  ];

  // 金融业务组件列表
  const businessComponents: ComponentItem[] = [
    { id: 'fundFlow', name: '资金流水', icon: <BankOutlined /> },
    { id: 'tradingForm', name: '交易表单', icon: <BankOutlined /> },
    { id: 'portfolio', name: '资产组合', icon: <BankOutlined /> },
  ];

  // 渲染组件项
  const renderComponent = (item: ComponentItem) => (
    <Card
      size="small"
      style={{
        margin: '4px 0',
        cursor: 'move',
      }}
      hoverable
    >
      <div style={{ display: 'flex', alignItems: 'center' }}>
        {item.icon}
        <span style={{ marginLeft: 8 }}>{item.name}</span>
      </div>
    </Card>
  );

  // 定义Tabs项
  const tabItems = [
    {
      key: '1',
      label: '基础组件',
      children: <List dataSource={basicComponents} renderItem={renderComponent} />,
    },
    {
      key: '2',
      label: '容器组件',
      children: <List dataSource={containerComponents} renderItem={renderComponent} />,
    },
    {
      key: '3',
      label: '业务组件',
      children: <List dataSource={businessComponents} renderItem={renderComponent} />,
    },
  ];

  return (
    <div>
      <Title level={4}>组件库</Title>
      <Tabs defaultActiveKey="1" items={tabItems} />
    </div>
  );
};

export default ComponentPanel;
